<template>
  <div class="sc-collapse">
    <div class="sc-collapse-title">
      <slot name="title"></slot>
      <i
        :class="isCollapseVm ? iconClassCollapse : iconClassExpend"
        @click="toggleCollapse"
      ></i>
    </div>
    <div v-show="!isCollapseVm">
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "ScCollapseDisplay",
  props: {
    value: {
      type: Boolean,
      default: undefined
    },
    iconClassCollapse: {
      default: "el-icon-arrow-up"
    },
    iconClassExpend: {
      default: "el-icon-arrow-down"
    }
  },
  data() {
    return {
      isCollapse: false
    };
  },
  computed: {
    isCollapseVm: {
      get() {
        if (this.value !== undefined) {
          return !this.value;
        }
        return this.isCollapse;
      },
      set(newValue) {
        this.isCollapse = newValue;
        this.$emit("input", !newValue);
      }
    }
  },
  methods: {
    async toggleCollapse() {
      this.isCollapseVm = !this.isCollapseVm;
      await this.$nextTick();
      this.$emit("change", !this.isCollapseVm);
    }
  }
};
</script>

<style scoped>
.sc-collapse-title i {
  user-select: none;
  cursor: pointer;
}
</style>
